<template>
  <!-- 门禁控制 -->
  <div class="new-control-pop">
    <div class="new-control-pop-title endbox">
      <div class="left">
        <span class="iconfont iconsuojuguanli_huaban"></span>
        <span>锁具管理</span>
        <span>></span>
        <span>门禁管理</span>
      </div>
      <div class="back" @click="goBack"></div>
    </div>
    <div class="new-control-pop-station betweenbox">
      <!-- 110kV站前变 -->
      <div class="station">
          <StationFront @handelClick='handelClick'/>
      </div>
      <!-- 右侧视频 -->
      <div class="video">
          <VideoGroup :point_id='point_id' />
      </div>
    </div>
    <div class="new-control-pop-record">
      <!-- 表格 -->
      <CardRecords :point_id='point_id'/>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import StationFront from './components/StationFront.vue'
import VideoGroup from './components/VideoGroup.vue'
import CardRecords from './components/CardRecords.vue'
@Component({
    components:{
        StationFront,
        VideoGroup,
        CardRecords
    }
})
export default class newControlPop extends Vue {
  public goBack(val: string) {
    this.$router.push({path:"/locks/EntranceGuardPage",query: {code:this.$route.query.code,name:this.$route.query.name}});
  }
  point_id=''
  handelClick(point_id){
    this.point_id=point_id
  }
}
</script>

<style lang="scss" scoped>
.new-control-pop {
  width: 100%;
  height: 100%;
  &-title {
    width: 100%;
    height: 0.26rem;
    > div {
      font-size: 0.2rem;
      > span {
        font-size: 0.2rem;
      }
    }
    .left {
      width: 100%;
    }
    .back {
      width: 0.9rem;
      height: 0.3rem;
      background: url("../../../../assets/img/return.png") no-repeat center
        center;
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
  &-station {
    width: 100%;
    height: 4.8rem;
    .station,
    .video {
      width: calc(50% - 0.1rem);
      height: 100%;
    }
  }
  &-record {
    width: 100%;
    height: calc(100% - 5.1rem);
  }
}
</style>